<template>
  <div class="main-box">
    <van-nav-bar class="top-title" title="社区" placeholder="true" fixed="true" />
    <div class="essay" v-for="(essay, index) in essays" :key="essay">
      <div class="user">
        <div class="head"><img :src="essay.userHead" /></div>
        <span>{{ essay.userName }}</span>
      </div>
      <div class="title">{{ essay.title }}</div>
      <div class="video"><video :src="essay.video" controls></video></div>
      <div class="bottom">
        <div class="box">
          <img
            src="../assets/images/weidianzhan.png"
            v-if="!essays[index].isDianzhan"
            @click="dianzhan(index)"
          />
          <img
            src="../assets/images/yidianzhan.png"
            v-if="essays[index].isDianzhan"
            @click="dianzhan(index)"
          />
          <span>{{ essay.dianzhan }}</span>
        </div>
        <div class="box">
          <img
            src="../assets/images/weidiancai.png"
            v-if="!essays[index].isDiancai"
            @click="diancai(index)"
          />
          <img
            src="../assets/images/yidiancai.png"
            v-if="essays[index].isDiancai"
            @click="diancai(index)"
          />
          <span>{{ essay.diancai }}</span>
        </div>
        <div class="box" @click="essay.ispinglun = !essay.ispinglun">
          <img src="../assets/images/pinglun.png" />
          <span>{{ essay.pinglun.length }}</span>
        </div>
      </div>
      <div v-if="essay.ispinglun">
        <div class="pinglun" v-for="p in essay.pinglun" :key="p" >
          <div class="head"><img :src="p.head" /></div>
          <div class="name">{{ p.name }}:</div>
          <div class="text">{{ p.text }}</div>
        </div>
      </div>
      <hr />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

var essays = ref([
  {
    userName: '三毛',
    userHead: '../../src/assets/images/sanmao.jpg',
    title: '有趣的健身视频',
    video: '../../src/assets/video/1.mp4',
    dianzhan: 125,
    isDianzhan: false,
    diancai: 26,
    isDiancai: false,
    pinglun: [
      {
        name: '三毛',
        head: '../../src/assets/images/sanmao.jpg',
        text: '这个博主太有趣了'
      },
      {
        name: '懒大王',
        head: '../../src/assets/images/landawang.jpg',
        text: '好看爱看'
      },
      {
        name: '那幕桑',
        head: '../../src/assets/images/nanasang.jpg',
        text: '666'
      }
    ],
    ispinglun: false
  },
  {
    userName: '懒大王',
    userHead: '../../src/assets/images/landawang.jpg',
    title: '一起健身',
    video: '../../src/assets/video/2.mp4',
    dianzhan: 133,
    isDianzhan: false,
    diancai: 23,
    isDiancai: false,
    pinglun: [
      {
        name: '三毛',
        head: '../../src/assets/images/sanmao.jpg',
        text: '宝宝我们一起健身'
      },
      {
        name: '懒大王',
        head: '../../src/assets/images/landawang.jpg',
        text: '加油加油'
      }
    ],
    ispinglun: false
  },
  {
    userName: '三毛',
    userHead: '../../src/assets/images/sanmao.jpg',
    title: '今天也要保持健康',
    video: '../../src/assets/video/3.mp4',
    dianzhan: 15,
    isDianzhan: false,
    diancai: 156,
    isDiancai: false,
    pinglun: [
      {
        name: '三毛',
        head: '../../src/assets/images/sanmao.jpg',
        text: '自律遇见更好的自己'
      },
      {
        name: '懒大王',
        head: '../../src/assets/images/landawang.jpg',
        text: '健健康康'
      },
      {
        name: '那幕桑',
        head: '../../src/assets/images/nanasang.jpg',
        text: '你还自律上了'
      }
    ],
    ispinglun: false
  },
  {
    userName: '懒大王',
    userHead: '../../src/assets/images/landawang.jpg',
    title: '运动让人健康',
    video: '../../src/assets/video/4.mp4',
    dianzhan: 21,
    isDianzhan: false,
    diancai: 2,
    isDiancai: false,
    pinglun: [
      {
        name: '三毛',
        head: '../../src/assets/images/sanmao.jpg',
        text: '你说的对'
      },
      {
        name: '懒大王',
        head: '../../src/assets/images/landawang.jpg',
        text: '我说的对'
      },
      {
        name: '那幕桑',
        head: '../../src/assets/images/nanasang.jpg',
        text: '她说的对'
      }
    ],
    ispinglun: false
  },
  {
    userName: '那幕桑',
    userHead: '../../src/assets/images/nanasang.jpg',
    title: '坚持锻炼',
    video: '../../src/assets/video/5.mp4',
    dianzhan: 13,
    isDianzhan: false,
    diancai: 0,
    isDiancai: false,
    pinglun: [
      {
        name: '那幕桑',
        head: '../../src/assets/images/nanasang.jpg',
        text: '666'
      }
    ],
    ispinglun: false
  }
])

function dianzhan(index) {
  if (essays.value[index].isDianzhan == false) {
    essays.value[index].dianzhan += 1
    if (!essays.value[index].isDianzhan == essays.value[index].isDiancai) {
      diancai(index)
    }
  }
  if (essays.value[index].isDianzhan == true) {
    essays.value[index].dianzhan -= 1
  }
  essays.value[index].isDianzhan = !essays.value[index].isDianzhan
}

function diancai(index) {
  if (essays.value[index].isDiancai == false) {
    essays.value[index].diancai += 1
    if (!essays.value[index].isDianzhan == essays.value[index].isDiancai) {
      dianzhan(index)
    }
  }
  if (essays.value[index].isDiancai == true) {
    essays.value[index].diancai -= 1
  }
  essays.value[index].isDiancai = !essays.value[index].isDiancai
}
</script>

<style lang="scss" scoped>
.main-box {
  .user {
    display: flex;
    align-items: center;

    .head {
      margin: 20px 10px 20px 10px;

      img {
        height: 50px;
        border-radius: 50%;
      }
    }

    span {
      font-size: 20px;
    }
  }

  .title {
    margin-left: 10px;
    margin-bottom: 10px;
  }

  .video {
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    margin-left: 5%;
    margin-right: 5%;

    .box {
      display: flex;
      margin-top: 10px;
      margin-bottom: 20px;

      img {
        width: 30px;
      }

      span {
        margin-top: auto;
        margin-bottom: auto;
      }
    }
  }

  .pinglun {
    display: flex;
    justify-content: space-between;
    border: 1px solid #ccc;
    height: 80px;
    background: rgb(247, 247, 247);

    .head {
      width: 50px;
      margin-top: auto;
      margin-bottom: auto;

      img {
        border-radius: 50%;
      }
    }

    .name {
      width: 90px;
      margin-top: auto;
      margin-bottom: auto;
      margin-left: 10px;
    }

    .text {
      margin-top: auto;
      margin-bottom: auto;
      flex: 1;
    }
  }
}
</style>
